<template>
    <div class="menu">
        <el-card shadow="never">
            <router-link to="/permission/menu/edit" class="m-r-15">
                <el-button v-perm="['system:menu:add']" type="primary" size="small">
                    添加菜单
                </el-button>
            </router-link>

            <el-button size="small" @click="toggleRowExpansion(openFlag.openFlagValue)">
                全部展开/折叠
            </el-button>

            <el-table
                :data="menuTableData"
                class="m-t-24"
                row-key="id"
                :default-expand-all="openFlag.openFlagValue"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                size="mini"
                ref="dataTreeList"
            >
                <el-table-column prop="menuName" label="名称" width="180"> </el-table-column>
                <el-table-column prop="menuType" label="菜单类型">
                    <template #default="scope">
                        <span v-if="scope.row.menuType == menuDataType.CATALOG">{{ '目录' }}</span>
                        <span v-else-if="scope.row.menuType == menuDataType.MENU">
                            {{ '菜单' }}
                        </span>
                        <span v-else>{{ '按钮' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="menuIcon" label="图标"> </el-table-column>
                <el-table-column prop="component" label="组件路径"> </el-table-column>
                <el-table-column prop="menuSort" label="排序"> </el-table-column>
                <el-table-column prop="perms" label="权限标识"> </el-table-column>
                <el-table-column prop="paths" label="路由地址"> </el-table-column>
                <el-table-column prop="isDisable" label="状态">
                    <template #default="scope">
                        <span>{{ scope.row.isDisable == 0 ? '启用' : '关闭' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="160"> </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <router-link
                            v-perm="['system:menu:edit']"
                            class="m-r-10"
                            :to="{
                                path: '/permission/menu/edit',
                                query: {
                                    id: scope.row.id
                                }
                            }"
                        >
                            <el-button type="text" size="mini">编辑</el-button>
                        </router-link>

                        <popup
                            v-perm="['system:menu:del']"
                            class="m-r-10 inline"
                            @confirm="handleDelete(scope.row.id)"
                        >
                            <template #trigger>
                                <el-button type="text" size="mini">删除</el-button>
                            </template>
                        </popup>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import Popup from '@/components/popup/index.vue'
import { usePages } from '@/core/hooks/pages'
import { onMounted, reactive, ref } from 'vue'
import { apiConfigGetMenu, apiMenuDelete } from '@/api/auth'
import type { ElForm } from 'element-plus'

const menuDataType = {
    CATALOG: 'M', // 目录
    MENU: 'C', // 菜单
    BUTTON: 'A' // 按钮
}

const menuTableData = ref<any>([])

// 获取菜单列表
const getMenuTableData = () => {
    apiConfigGetMenu().then(data => {
        menuTableData.value = data
    })
}

// 删除菜单
const handleDelete = async (id: number) => {
    await apiMenuDelete({ id })
    getMenuTableData()
}

const dataTreeList = ref<any>()

// 树层级打开
const openFlag = {
    openFlagValue: true
}

// 展开收缩
const toggleRowExpansion = (isExpansion: any) => {
    openFlag.openFlagValue = !isExpansion
    toggleRowExpansion_forAll(menuTableData.value, openFlag.openFlagValue)
}

const toggleRowExpansion_forAll = (data: any, isExpansion: any) => {
    data.forEach((item: any) => {
        dataTreeList.value.toggleRowExpansion(item, isExpansion)
        if (item.children != undefined && item.children != null) {
            toggleRowExpansion_forAll(item.children, isExpansion)
        }
    })
}

onMounted(() => {
    getMenuTableData()
})
</script>

<style lang="scss" scoped></style>
